<template>
  <div>
    <div class="nav">
      <div class="nav-content">
        <div class="nav-logo">
          <a href="" class="mfw-logo"></a>
        </div>
        <ul class="head-nav">
          <li><router-link to="/" exact>首页</router-link></li>
          <li><router-link to="/destination">目的地</router-link></li>
          <li><router-link to="/strategy">旅游攻略</router-link></li>
          <li><a href="">去旅行</a></li>
          <li><a href="">机票火车票</a></li>
          <li><router-link to="/orderWinehouse">订酒店</router-link></li>
          <li><router-link to="/traveler">社区</router-link></li>
          <li class="head-nav-choice">
            <a href=""
              ><div class="mfwzx-logo">
                <img src="../../static/images/mfwzx.png" alt="" /></div
            ></a>
          </li>
        </ul>
        <div class="head-search">
          <div class="head-searchform">
            <input type="text" />
            <i class="iconfont icon-sousuo head-searchicon"></i>
          </div>
        </div>
        <!-- <div class="login-out" >
          <a href="" class="weibo-login"></a>
          <a href="" class="qq-login"></a>
          <a href="" class="weixin-login"></a>
          <router-link to="/loginOrRegist" class="login-register" exact
            >登录</router-link
          >
        </div> -->
        <div class="login-out1">
          <img src="../../static/images/345.jpeg" alt="" />
          <span>2131312</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
};
</script>

<style lang="stylus" scoped>
/* 导航栏 */
.router-link-active {
  background-color: orange;
  color: #fff;
}

.nav {
  width: 100%;
  height: 58px;
  background-color: #fff;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 3px;
}

.nav-content {
  width: 1120px;
  height: 58px;
  margin: 0 auto;
}

.nav-logo {
  float: left;
  width: 136px;
  height: 58px;
}

.nav-logo .mfw-logo {
  display: inline-block;
  margin-top: 12px;
  height: 33px;
  width: 120px;
  background: url('../../static/images/header-small-sprites3.png') no-repeat 0 0;
}

.head-nav {
  float: left;
  display: inline;
  line-height: 58px;
  font-size: 16px;
  padding: 0 10px 0 25px;
  color: #333;
}

.head-nav li {
  float: left;
}

.head-nav li a {
  display: block;
  height: 58px;
  padding: 0 10px;
  box-sizing: border-box;
}

.head-nav li a:hover {
  color: rgb(253, 158, 49);
  border-bottom: 2px solid rgb(253, 158, 49);
}

.head-nav li .router-link-active:hover {
  color: #fff;
}

.head-nav-choice .mfwzx-logo {
  width: 75px;
  height: 58px;
}

.mfwzx-logo img {
  margin-top: 10px;
  width: 75px;
  height: 40px;
}

.head-search {
  float: left;
  width: 130px;
  height: 58px;
}

.head-searchform {
  width: 130px;
  height: 30px;
  margin-top: 13px;
  background-color: rgb(245, 245, 245);
  border-radius: 5px;
}

.head-searchform input {
  height: 30px;
  width: 100px;
  outline: none;
  border: 0;
  background-color: rgb(245, 245, 245);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.head-searchicon {
  font-weight: 700;
}

.login-out, .login-out1 {
  display: flex;
  float: right;
  padding: 15px 0;
  height: 26px;
  width: 183px;
  line-height: 26px;
  color: #c9c9c9;
  text-align: right;
}

.login-out {
  justify-content: space-between;
}

.login-out1 {
  justify-content: flex-end;

  img {
    border-radius: 10px;
  }

  span {
    margin-left: 20px;
  }
}

.weibo-login {
  display: inline-block;
  margin-right: 6px;
  width: 26px;
  height: 26px;
  background-image: url('../../static/images/header-sprites15.png');
  background-position: 0 -50px !important;
  overflow: hidden;
  vertical-align: -7px;
  vertical-align: middle;
}

.qq-login {
  display: inline-block;
  margin-right: 6px;
  width: 26px;
  height: 26px;
  background-image: url('../../static/images/header-sprites15.png');
  background-position: -30px -50px !important;
  overflow: hidden;
  vertical-align: -7px;
  vertical-align: middle;
}

.weixin-login {
  display: inline-block;
  margin-right: 6px;
  width: 26px;
  height: 26px;
  background-image: url('../../static/images/header-sprites15.png');
  background-position: 0 -165px !important;
  overflow: hidden;
  vertical-align: -7px;
  vertical-align: middle;
}

.login-register {
  font-size: 16px;
  color: rgb(248, 133, 66);
}
</style>